:root {
  --color            : #000;
  --placeholder-color: #999;
  --input-bg-color   : #f7f7f7;
}

.wx-coolui-scroller-search {
  display : flex;
  overflow: hidden;

  .search-inner {
    background-color: var(--input-bg-color, #f7f7f7);
    flex            : 1;
    height          : 68rpx;
    margin-right    : 0rpx;
    padding         : 0 20rpx 0 68rpx;
    position        : relative;
    border-radius   : 5rpx;
    display         : flex;
    overflow        : hidden;

    &.round {
      border-radius: 68rpx;
    }

    .inner {
      position: relative;
      flex    : 1;
    }

    .search-input {
      height     : 68rpx;
      line-height: 68rpx;
      font-size  : 28rpx;
      background : transparent;
      position   : relative;
      z-index    : 5;
      flex       : 1;
      color      : var(--color, #000)
    }

    .search-icon {
      background-repeat  : no-repeat;
      background-position: center;
      background-size    : 28rpx;
      width              : 68rpx;
      height             : 68rpx;
      position           : relative;
      margin-top         : -2rpx;

      &::before {
        content         : "";
        width           : 20rpx;
        height          : 20rpx;
        border          : 2rpx solid var(--placeholder-color, #999);
        position        : absolute;
        left            : 50%;
        top             : 50%;
        transform       : translate(-50%, -50%);
        // margin-top   : -2rpx;
        border-radius   : 100%;
        background-color: var(--input-bg-color, #f7f7f7);
        z-index         : 5;
      }

      &::after {
        content                  : "";
        width                    : 2rpx;
        height                   : 16rpx;
        background               : var(--placeholder-color, #999);
        // background-color      : #000;
        position                 : absolute;
        left                     : 50%;
        top                      : 50%;
        // margin-top         : -4rpx;
        transform-origin         : 0% 0;
        transform                : rotate(-45deg);

        // top          : 50%;
        // transform    : translate(-50%, -50%);
        margin-top: 2rpx;
      }

      // overflow           : hidden;

      // &::after {
      //   content            : "";
      //   display            : block;
      //   position           : absolute;
      //   left               : -68rpx;
      //   top                : 0;
      //   width              : 100%;
      //   height             : 100%;
      //   z-index            : 10;
      //   background-size    : 28rpx;
      //   background-repeat  : no-repeat;
      //   background-position: center;
      //   background-image   : url('');
      //   filter             : drop-shadow(68rpx 0px var(--placeholder-color, #999));
      // }
    }

    .search-placeholder {
      position         : absolute;
      left             : 50%;
      top              : 0;
      transform        : translateX(-50%);
      // padding: 0 76rpx;
      font-size        : 28rpx;
      // color      : #999;
      text-align       : center;
      line-height      : 68rpx;
      height           : 68rpx;
      transition       : transform 0.4s, left 0.3s;
      display          : flex;
      // align-items   : center;
      color            : var(--placeholder-color, #999);
    }

    .search-close {
      display            : none;
      background-color   : var(--input-bg-color, #f7f7f7);
      width              : 40rpx;
      height             : 100%;
      background-size    : cover;
      position           : absolute;
      right              : 0;
      padding            : 0 20rpx 0 20rpx;
      top                : 50%;
      z-index            : 10;
      transform          : translateY(-50%);
      background-size    : 40rpx;
      background-repeat  : no-repeat;
      background-position: 20rpx center;
      background-image   : url('');
    }
  }

  .button {
    height     : 68rpx;
    line-height: 68rpx;
    font-size  : 28rpx;
    padding    : 0 14px;
  }

  &.on {
    .search-placeholder {
      text-align: left;
      left      : 0rpx;
      transform : translateX(0);
    }

    .button {
      display    : block;
      margin-left: 20rpx;
    }
  }

  &.clearable {
    .search-inner {
      .search-input {
        margin-right: 58rpx;
      }

      .search-close {
        display: block;
      }
    }
  }
}